<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>

    <!-- Vue 的核心是数据与视图的双向绑定,当我们修改数组时, Vue 会检测到数据变化,所以用 v-for 渲染的视图也会立即更新。
        Vue 包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新:

        数组的操作可参考: http://www.w3school.com.cn/jsref/jsref_obj_array.asp
        更改原数组:
            - push()
            - pop()
            - shift()
            - unshift()
            - splice()      # 删除元素并向元素添加新的元素
            - sort()
            - reverse()

        返回一个新的数组:
            - filter()      通过回调函数对数组进行处理,返回一个新的函数
            - concat()      连接两个或更多的数组，并返回结果
            - slice()       切片,从某个已有的数组返回选定的元素
    -->


    <!-- 当不想改变原数组,想通过一个数组的副本来做过滤或排序的显示时, 可以使用计算属性来返回过滤或排序后的数组
     -->
    <div id="app1">

        <ul>
            <template v-for="book in filterBooks">
                <li>书名: {{ book.name }}</li>
                <li>作则: {{ book.author }}</li>
            </template>

        </ul>


    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {

                // 定义一个数组类型的数据 books, 用 v-for 将 <li> 标签循环渲染
                books: [
                    {
                        'name': "<< Vue.js 实战 >>",
                        'author': '梁灏'
                    },
                    {
                        'name': "<< JavaScript 语言精粹 >>",
                        'author': 'Douglas Crockford'

                    },
                    {
                        'name': "<< JavaScript 高级程序设计 >>",
                        'author': 'Nicholas C.Zakas'
                    }
                ]
            },
            computed: {

                // 将书名中包含 JavaScript 关键词的数据过滤出来
                filterBooks: function () {
                    return this.books.filter(function (book) {
                        return book.name.match(/JavaScript/);
                    })
                },

                sortedBooks: function () {
                    return this.books.sort(function (a, b) {
                        return a.name.length < b.name.length;
                    })
                }
            }
        });


    </script>

</body>
</html>